<template>
  <div class="book-list">
    <h2>图书列表</h2>
    <el-table
      :data="books"
      style="width: 100%"
      v-if="books.length > 0"
    >
      <el-table-column prop="bookId" label="ID" width="80" />
      <el-table-column prop="bookName" label="书名">
        <template #default="{ row }">
          <div class="book-name" @click="handleRowClick(row)">{{ row.bookName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="author" label="作者" />
      <el-table-column prop="price" label="价格" width="120">
        <template #default="{ row }">
          ¥{{ Number(row.price).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="stock" label="库存" width="100" />
      <el-table-column label="操作" width="200">
        <template #header>
          <div class="operation-header">
            <el-button @click="$router.push('/')" size="small" type="info">返回</el-button>
            <span>操作</span>
          </div>
        </template>
        <template #default="{ row }">
          <div class="action-buttons">
            <el-button
              v-if="authStore.isAuthenticated"
              type="primary"
              size="small"
              @click="$router.push(`/books/edit/${row.bookId}`)"
            >
              编辑
            </el-button>
            <AddToCart v-if="authStore.isAuthenticated" :book-id="row.bookId" :book-name="row.bookName" />
            <el-button
              v-else
              type="primary"
              size="small"
              @click="handleNeedLogin"
            >
              加入购物车
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-else description="暂无数据" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { bookAPI } from '@/api/book';
import AddToCart from '@/components/AddToCart.vue';
import { ArrowLeft } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

interface Book {
  bookId: number;
  bookName: string;
  author: string;
  price: string;
  stock: string;
  coverImage?: string | null;
}

const router = useRouter();
const authStore = useAuthStore();
const books = ref<Book[]>([]);

// 点击书名跳转到详情页
const handleRowClick = (book: Book) => {
  router.push(`/books/${book.bookId}`);
};

const handleNeedLogin = () => {
  ElMessage.warning('请先登录');
  router.push('/login');
};

const fetchBooks = async () => {
  try {
    const res = await bookAPI.getBookList();
    books.value = Array.isArray(res.data) ? res.data : [res.data];
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

onMounted(() => {
  fetchBooks();
});
</script>

<style scoped>
.book-list {
  padding: 20px;
}

.book-name {
  cursor: pointer;
  color: #409EFF;
}

.book-name:hover {
  text-decoration: underline;
}

.operation-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}
</style>
